<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Sistema </title>
    <head>
		<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css" />
		<link rel="stylesheet" href="css/smoothness/jquery-ui-1.10.4.custom.min.css" />
		<link rel="stylesheet" href="css/ui.jqgrid.css" />
		<script src="js/jquery-1.10.2.js"></script>
		<script src="js/jquery.jqGrid.min.js"></script>
		<script src="js/jquery.jqGrid.src.js"></script>
		<script src="js/jquery-ui.js"></script>
		<script src="js/grid.locale-es.js"></script>
		<script src="bootstrap/js/bootstrap.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="highcharts/highcharts.js"></script>
        <script src="highcharts/modules/exporting.js"></script>

        <style>
            .center-block {
                float: none;
                margin-left: auto;
                margin-right: auto;
            }

            .input-group .icon-addon .form-control {
                border-radius: 0;
            }

            .icon-addon {
                position: relative;
                color: #555;
                display: block;
            }

                .icon-addon:after,
                .icon-addon:before {
                    display: table;
                    content: " ";
                }

                .icon-addon:after {
                    clear: both;
                }

                .icon-addon.addon-md .glyphicon,
                .icon-addon .glyphicon,
                .icon-addon.addon-md .fa,
                .icon-addon .fa {
                    position: absolute;
                    z-index: 2;
                    left: 10px;
                    font-size: 14px;
                    width: 20px;
                    margin-left: -2.5px;
                    text-align: center;
                    padding: 10px 0;
                    top: 1px;
                }

                .icon-addon.addon-lg .form-control {
                    line-height: 1.33;
                    height: 40px;
                    font-size: 18px;
                    padding: 10px 16px 10px 40px;
                }

                .icon-addon.addon-sm .form-control {
                    height: 30px;
                    padding: 5px 10px 5px 28px;
                    font-size: 12px;
                    line-height: 1.5;
                }

                .icon-addon.addon-lg .fa,
                .icon-addon.addon-lg .glyphicon {
                    font-size: 18px;
                    margin-left: 0;
                    left: 11px;
                }

                .icon-addon.addon-md .form-control,
                .icon-addon .form-control {
                    padding-left: 30px;
                    float: left;
                    font-weight: normal;
                }

                .icon-addon.addon-sm .fa,
                .icon-addon.addon-sm .glyphicon {
                    margin-left: 0;
                    font-size: 12px;
                    left: 5px;
                    top: -1px;
                }

                .icon-addon .form-control:focus + .glyphicon,
                .icon-addon:hover .glyphicon,
                .icon-addon .form-control:focus + .fa,
                .icon-addon:hover .fa {
                    color: #2580db;
                }

            .form-control {
                font-size: 12px;
                height: 28px;
                padding: 5px 12px;
            }

            body {
                font-size: 12px !important;
                overflow-y: scroll;
                overflow-x: hidden;
            }

            .btn {
                padding: 4px 12px;
                font-size: 12px;
            }

            a:link {
                font-size: 12px;
                text-decoration: none;
            }

            a:hover {
                background: #CEECF5;
            }

            .form-group {
                margin-bottom: 10px;
            }

            .ui-jqgrid .ui-pg-input {
                height: 18px !important;
                font-size: .8em;
                margin: 0;
            }

            .ui-jqgrid .ui-jqgrid-btable {
                table-layout: auto;
            }

            .ui-widget-overlay {
                opacity: 0.7;
                background: "rgb(0, 0, 0)",;
            }
        </style>

        <script>

            $(document).ready(function () {

                Lineas();
                Grafica();

                $("#btnRegresar").click(function () {
                    window.location = "BandejaTableroControl.html";
                });

            });

            function Lineas() {
                $(function () {
                    $('#Grafico2').highcharts({
                        title: {
                            text: 'Historial de Desviación',
                            x: -20 //center
                        },
                        subtitle: {
                            text: '',
                            x: -20
                        },
                        xAxis: {
                            categories: [
								'Jul 2014', 'Ago 2014', 'Set 2014', 'Oct 2014', 'Nov 2014', 'Dic 2014']
                        },
                        yAxis: {
                            title: {
                                text: 'Rango del Indicador'
                            },
                            plotLines: [{
                                value: 0,
                                width: 1,
                                color: '#808080'
                            }]
                        },
                        tooltip: {
                            valueSuffix: ''
                        },
                        /*legend: {
							layout: 'vertical',
							align: 'right',
							verticalAlign: 'middle',
							borderWidth: 0
						},*/
                        legend: {
                            layout: 'vertical',
                            itemMarginTop: 10,
                            itemMarginBottom: 10
                        },
                        series: [{
                            name: 'Desviación',
                            data: [2, 0.5, 4, 5, 8, -10]
                        }],
                        credits: {
                            enabled: false
                        },
                    });
                });
            }

            function Grafica() {
                $(function () {
                    $('#Grafico1').highcharts({
                        chart: {
                            type: 'bar',
                            height: 250,
                        },
                        title: {
                            text: 'Efectividad de Entrega'
                        },
                        subtitle: {
                            text: 'Iniciativa: Mejorar Entrega'
                        },
                        xAxis: {
                            categories: ['Meta', 'Valor'],
                            title: {
                                text: null
                            }
                        },
                        yAxis: {
                            min: 0,
                            max: 100,
                            title: {
                                text: '',
                                align: 'high'
                            },
                            labels: {
                                overflow: 'justify'
                            }
                        },
                        tooltip: {
                            valueSuffix: ''
                        },
                        plotOptions: {
                            bar: {
                                dataLabels: {
                                    enabled: true
                                }
                            }
                        },
                        legend: {
                            layout: 'vertical',
                            align: 'right',
                            verticalAlign: 'top',
                            x: 400,
                            y: 100,
                            floating: false,
                            borderWidth: 1,
                            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                            shadow: true,
                            reversed: true
                        },
                        credits: {
                            enabled: false
                        },
                        series: [{
                            //name: '2014',
                            showInLegend: false,
                            data: [80.000, 80.665]
                        }]
                    });
                });
            }

        </script>

    </head>
    <body>
        <div class="container">
            <div class="row" style="padding-top: 10px">
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="pull-right" style="padding-right: 13px;">
                        <span class="link">
                            <span class=" glyphicon glyphicon-user"></span>gramos</span>
                        <a href="#">Cerrar</a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="page-header clearfix" style="background: #ef2a24; border-radius: 3px; padding-top: 20px; padding-left: 10px; padding-left: 10px; padding-bottom: 10px; margin: 10px; color: #fff;">
                        <div class="col-md-4">
                            <div class="pull-left">
                                <img style="display: block; max-width: 100%; width: 50%; height: 50%;" src="images/logo.jpg"></img>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="pull-right">
                                <form class="form-inline form-search" role="form">
                                    <div class="form-group" style="float: left">
                                        <label style="padding-top: 5px; padding-right: 10px; padding-top: 12px;" class="control-label" for="txtFilterText">Proveedor</label>
                                    </div>
                                    <div class="icon-addon addon-lg" style="float: left">
                                        <input style="width: 250px; font-size: small;" type="text" placeholder="Nombre o Nro de Documento" class="form-control">
                                        <label class="glyphicon glyphicon-search" rel="tooltip" title=""></label>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">

                <div class="panel-default">
                    <div class="col-xs-12">
                        <div class="col-md-3">
                            <div class="panel-group" id="accordion">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Asignación</a>
                                        </h4>
                                    </div>
                                    <div id="collapseOne" class="panel-collapse collapse">
                                        <div class="panel-body" style="font-size: 13px">
                                            <p><a href="AsignacionAsistentesporBanca.html">Asignación de Asistentes por Banca</a></p>
                                            <p><a href="#">Asignación Manual de Proveedores Sin Banca</a></p>
                                            <p><a href="ReasignacionAsistentesporBanca.html">Reasignación de Asistentes por Banca</a></p>
                                            <p><a href="BalanceoGeneralAsignacionProveedores.html">Balanceo General de la Asignación de Proveedores</a></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Carga de Proveedores</a>
                                        </h4>
                                    </div>
                                    <div id="collapseTwo" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <p><a href="#">Registro Masivo</a></p>
                                            <p><a href="#">Registro Individual</a></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Gestión de Proveedores</a>
                                        </h4>
                                    </div>
                                    <div id="collapseThree" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <p><a href="#">Bandeja de Proveedores</a></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">Gestión de Pagos Proveedores</a>
                                        </h4>
                                    </div>
                                    <div id="collapseFour" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <p><a href="#">Bandeja de Pagos Proveedores</a></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseFive">Tablero de Control</a>
                                        </h4>
                                    </div>
                                    <div id="collapseFive" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <p><a href="BandejaTableroControl.html">Bandeja del Tablero de Control</a></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseSix">Configuración de Políticas</a>
                                        </h4>
                                    </div>
                                    <div id="collapseSix" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <p><a href="#">Mantenimiento</a></p>
                                            <p><a href="#">Valores de Parámetros Generales</a></p>
                                            <p><a href="#">Mantenimiento de Asistentes</a></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-9">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <strong>Bandeja del Tablero de Control</strong>
                                </div>
                            </div>
                            <div class="panel panel-default" style="padding-top: 0px !important; margin-top: 0px !important">
                                <img style="width: 8%; height: 8%; padding: 10px" src="images/avatar.gif">
                                <strong>Asistente 1</strong>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <strong>Procesos Internos</strong>
                                </div>
                            </div>
                            <div>
                                <div class="panel panel-default" style="width: 60%; height: 100px; float: left; text-align: left; padding-top: 40px; padding-left: 20px">
                                    <strong>Indice de Efectivad de Operaciones</strong>
                                </div>
                                <div class="panel panel-default" style="width: 20%; height: 100px; float: left; text-align: center">
                                    <p style="padding-top: 10px">
                                        <strong>Desviación</strong>
                                    <p>
                                    <p style="font-weight: bold; font-size: 18px; padding-top: 10px; color: #ef2a24">0.665 %</p>
                                </div>
                                <div class="panel panel-default" style="width: 20%; height: 100px; float: left; text-align: center">
                                    <p style="padding-top: 10px">
                                        <strong>Semaforización</strong>
                                    <p>
                                        <img style="padding-top: -10px" src="images/big circle green.png">
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div id="Grafico1"></div>
                            </div>
                            <div class="panel panel-default">
                                <div id="Grafico2" style="height: 300px"></div>
                            </div>
                            <div>
                                <div class="panel-title" style='width: 30%; float: left; text-align: left; padding-left: 3px'>
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTen" style="text-align: left">Mínima</a>
                                        <img src='images/small circle red.png' title='' style='cursor: pointer' />
                                    </h4>
                                </div>
                                <div class="panel-title" style='width: 30%; float: left; text-align: center'>
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTen" style="text-align: left">Sobresaliente</a>
                                        <img src='images/small circle yellow.png' title='' style='cursor: pointer' />
                                    </h4>
                                </div>
                                <div class="panel-title" style='width: 30%; float: left; text-align: right'>
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTen" style="text-align: left">Satisfactoria</a>
                                        <img src='images/small circle green.png' title='' style='cursor: pointer' />
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12" style="padding-top: 20px; padding-bottom: 20px">
                        <div class="col-md-3"></div>
                        <div class="col-md-9">
                            <span>
                                <input id="btnRegresar" type="button" class="btn btn-default btn-filter" value="Regresar"></span>
                        </div>
                        <div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer" style="background: #ef2a24; border-radius: 3px; padding-top: 20px; padding-left: 10px; padding-left: 10px; padding-bottom: 10px; margin: 10px; color: #fff;">
                <div class="container">
                    <div class="col-xs-12">
                        <div style="width: 50%; float: left; text-align: left">
                            <p>Scotiabank - Todos los Derechos Reservados 2014</p>
                        </div>
                        <div style="width: 50%; float: right; text-align: right; padding-right: 50px;">
                            <p>
                                Powered by <a href="#">
                                    <img src="images/gmd.jpg" alt="Graña y Montero"></a>
                            <p>
                        </div>
                    </div>
                </div>
            </div>
    </body>
</html>
<script>
$(window).bind("load", function() {
   $('#highcharts-4').css('overflow', 'visible');
   $('#highcharts-4').css('height', '100%');
});
</script>